<template>
  <a-modal :visible="visible" :afterClose="hanldeAfterClose" @cancel="close" @ok="close" :width="1200" title="媒体文件">
    <a-spin :spinning="spinning">
      <a-tabs tabPosition="left">
        <a-tab-pane v-for="tab in tabList" :key="tab.key" :tab="tab.title">
          <a-row :gutter="[16, 16]" v-if="!$isEmpty(tab.imgList)">
            <a-col :span="8" v-for="img in tab.imgList" :key="img">
              <viewerImage
                fit="cover"
                :src="img"
                style="width: 100%; height: 100px"
                :preview-src-list="tab.imgList"
              ></viewerImage>
            </a-col>
          </a-row>
          <a-empty class="p-t-100" />
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </a-modal>
</template>

<script>
import { getArchivesImagesByID } from '@/api/fileManagement'
import axios from 'axios'
import { viewerImage } from '@/components'
export default {
  components: {
    viewerImage,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    visible(n) {
      if (n) {
        this.fetchData()
      }
    },
  },
  data() {
    return {
      spinning: false,
      tabList: [
        { title: '贵阳市城镇(非城镇)居民公共租赁住房申请表(表一)', imgList: [], key: 0 },
        { title: '贵阳市城镇(非城镇)居民公共租赁住房审核表(表二)', imgList: [], key: 1 },
        { title: '贵阳市公租房城市低收入家庭认定申请审批表', imgList: [], key: 2 },
        { title: '低保证复印件', imgList: [], key: 3 },
        { title: '申请报告', imgList: [], key: 4 },
        { title: '身份证复印件', imgList: [], key: 5 },
        { title: '户口复印件', imgList: [], key: 6 },
        { title: '结婚证明', imgList: [], key: 7 },
        { title: '现住房情况证明', imgList: [], key: 8 },
        { title: '残疾证复印件', imgList: [], key: 9 },
        { title: '其他材料', imgList: [], key: 10 },
      ],
    }
  },
  methods: {
    fetchData() {
      this.spinning = true
      axios
        .get(
          `http://222.85.201.111:8025/api/archives/getArchivesImagesByID?archivesid=${this.data.ID}&archivesno=${this.data.IDNO}`
        )
        .then((response) => {
          // getArchivesImagesByID({
          //   archivesid: this.data.ID,
          //   archivesno: this.data.IDNO
          // })
          //   .then((res) => {
          console.log('response', response)
          if (Array.isArray(response.data)) {
            // 处理图片
            this.tabList.forEach((e) => {
              e.imgList = response.data
                .filter((src) => src.indexOf(e.title) !== -1 && src.indexOf('162x225') === -1)
                // .map((src) => process.env.VUE_APP_FILE_IMG_URL + src)
                .map((src) => 'http://222.85.201.111:8025' + src)
            })
          } else {
            this.$message.error(response.msg || '查询失败，请重试！')
          }
        })
        .finally(() => {
          this.spinning = false
        })
    },
    close() {
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
    },
    hanldeAfterClose() {},
  },
}
</script>
<style lang="less" scoped></style>
